<!-- @format -->

<template>
  <!-- 主体区域-->
  <section class="main">
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      v-model="isAll" />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <li
        :class="{ completed: item.done }"
        v-for="(item, idx) in arr"
        :key="item.id">
        <div class="view">
          <input
            class="toggle"
            type="checkbox"
            v-model="item.done" />
          <label>{{ item.name }}</label>
          <button
            class="destroy"
            @click="$emit('del-todo', idx)"></button>
        </div>
        <input
          class="edit"
          value="Create a TodoMVC template" />
      </li>
    </ul>
  </section>
</template>

<script>
  export default {
    props: ['arr'],
    computed: {
      isAll: {
        get() {
          return this.arr.every(({ done }) => done)
        },
        set(flag) {
          // 这里是对数组中每个对象的属性在赋值，不是对数组arr本身赋值，这样做的可行的
          // 因为父传子了一个对象数组(引用类型),相当于父组件把这个数据的地址传给了子组件,
          // 今后子组件改了对象中的属性或是对数组做了push等操作，这个修改的状态可以同步到父组件中
          // 这样就可以不用子传父了，从而简化代码
          this.arr.forEach((item) => (item.done = flag))
        }
      }
    }
  }
</script>

<style></style>
